<template>
    <div class="supplier-view">
        <!-- 搜索查询区域 -->
        <div class="search-container">
            <el-input
                v-model="searchKey"
                placeholder="输入供货商名称查询"
                suffix-icon="el-icon-search"
                @keyup.enter="handleSearch"
                style="width: 300px; margin-right: 10px"
            ></el-input>
            <el-button type="primary" size="mini" @click="handleSearch">搜索</el-button>
        </div>

        <!-- 供货商列表页面 -->
        <div class="supplier-list-page">
            <h1 class="page-title">查看供货商</h1>
            <el-table :data="suppliersList" style="width: 100%" stripe border>
                <el-table-column prop="name" label="供货商名称" width="180"></el-table-column>
                <el-table-column prop="contactName" label="联系人" width="120"></el-table-column>
                <el-table-column prop="contactPhone" label="联系电话" width="150"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template #default="scope">
                        <!-- 根据不同状态显示不同文本 -->
                        <span v-if="scope.row.status === 0">待审核</span>
                        <span v-if="scope.row.status === 1">已审核</span>
                        <span v-if="scope.row.status === 2">未通过</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <!-- 仅当审核通过时可点击按钮 -->
                        <el-button
                            type="primary"
                            size="mini"
                            @click="provideQuote(scope.row)"
                            :disabled="scope.row.status!== 1"
                        >
                            查看报价
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 查看报价模态框 -->
        <el-dialog
            title="查看报价"
            :visible.sync="isQuoteDialogVisible"
            width="50%"
            @close="handleDialogClose"
        >
            <el-form
                ref="quoteForm"
                :model="quoteInfo"
                label-width="120px"
            >
                <el-form-item label="供货商名称">
                    <el-input
                        v-model="quoteInfo.supplierName"
                        disabled
                    ></el-input>
                </el-form-item>

                <el-form-item label="报价金额">
                    <el-input
                        v-model="quoteInfo.amount"
                        disabled
                    ></el-input>
                </el-form-item>

                <el-form-item label="有效期限">
                    <el-input
                        v-model="quoteInfo.validityPeriod"
                        disabled
                    ></el-input>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input
                        v-model="quoteInfo.remark"
                        type="textarea"
                        disabled
                        :rows="4"
                    ></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <el-button @click="handleDialogClose">关闭</el-button>
            </template>
        </el-dialog>

        <el-footer>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="ListPage"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </el-footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchKey: '',
            suppliersList: [],
            vo: {
                name: '',
                status: 0
            },
            total: 0,
            size: 10,
            current: 1,
            ListPage: [10, 20, 30, 40, 50],
            isQuoteDialogVisible: false,
            quoteInfo: {
                supplierId: null,
                supplierName: '',
                amount: null,
                validityPeriod: null,
                remark: ''
            }
        };
    },
    methods: {
        handleSearch() {
            this.vo.name = this.searchKey;
            this.search();
        },
        search() {
            this.$axios.post(`/suppliers/selectAll/${this.current}/${this.size}`, this.vo)
                .then(r => {
                    this.suppliersList = r.data.list;
                    this.total = r.data.total;
                })
                .catch(error => {
                    console.error('请求出错：', error);
                    this.$message.error('请求出错，请稍后重试');
                });
        },
        handleSizeChange(val) {
            this.size = val;
            this.search();
        },
        handleCurrentChange(val) {
            this.current = val;
            this.search();
        },
        provideQuote(supplier) {
            this.quoteInfo.supplierId = supplier.supplierId;
            this.quoteInfo.supplierName = supplier.name;
            // 这里需要根据实际情况调用后端接口获取报价信息
            this.$axios.get(`/quotes/suppliers/${supplier.supplierId}`)
                .then(response => {
                    this.quoteInfo.amount = response.data.amount;
                    this.quoteInfo.validityPeriod = response.data.validityPeriod;
                    this.quoteInfo.remark = response.data.remark;
                    this.isQuoteDialogVisible = true;
                })
                .catch(error => {
                    console.error('获取报价信息出错：', error);
                    this.$message.error('获取报价信息出错，请稍后重试');
                });
        },
        handleDialogClose() {
            this.isQuoteDialogVisible = false;
            // 清空报价信息
            this.quoteInfo = {
                supplierId: null,
                supplierName: '',
                amount: null,
                validityPeriod: null,
                remark: ''
            };
        }
    },
    created() {
        this.search();
    }
};
</script>